<template>
  <el-dialog title="测评票统计" :fullscreen='true' :close-on-click-modal="false" :visible.sync="summary5Data.visible" width="100%">
    <div id="three">
      <div class="fontDa fontDaTwo" v-loading.fullscreen.lock="fullscreenLoading5">
        <div class="customTableHeader">
          <div style="text-align:right; margin-bottom: 10px;">
            <el-button type="primary" v-if="activeName == 'first'" @click="detailBtn">综合得分明细</el-button>
            <el-button type="primary" @click="exportExcel(cppName+'_会议')">导出统计表</el-button>
          </div>
        </div>
        <div class="customTableHeader headers">
          <div style="text-align:right; margin-bottom: 10px;">
            <div class="customTableTitle"><tr><td>{{ cppName }}</td></tr></div>
          </div>
        </div>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick" class="customTableTitle" >
        <el-tab-pane :label="cppName +'(单选)'" name="first">
            <div class="cpTable one" v-for="(item,index) in tableData" :key="index+'1111'" style="margin-bottom:20px;">
                <el-table ref="report-table" :data="item.tableData" border:row-class-name="tableRowClassName">
                    <el-table-column label="项目" prop="title" min-width="300"> </el-table-column>
                    <el-table-column label="总票数" prop="zps" align="center" min-width="80"></el-table-column>
                    <el-table-column label="票数统计" align="center" min-width="200">
                        <el-table-column v-for="(gz,j) in item.tableColumn" :key="j+'lll'"  :label="gz.label" :prop="gz.prop" align="center"  :fzIndex="j">
                        </el-table-column>
                    </el-table-column>
                </el-table>
            </div>
        </el-tab-pane>
        <el-tab-pane :label="cppName +'(多选)'" name="second">
          <div v-for="(i,j) in tableData2" style="margin-top: 20px;">
            <el-table ref="report-table" :data="i.tableData" border:row-class-name="tableRowClassName">
                <el-table-column v-for="(col,index) in i.tableColumn" :key="index+'ggg'" :prop="col.prop" :label="col.label" align="center" :min-width="index==0?'170':'60'" :align="index==0?'left':'center'">
                </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="cppName +'(问答)'" name="third">
          <div v-for="(it,j) in tableData3" :key="j+'pp'">
            <el-table ref="report-table" :data="it.tableData" border:row-class-name="tableRowClassName">
                <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
                <el-table-column v-for="(col,index) in it.tableColumn" :key="index+'ttt'" :label="col.label" :prop="col.prop" align="left" min-width="350"></el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      append-to-body
      :fullscreen='true' 
      :close-on-click-modal="false"
      width="100%">
        <div class="customTableHeader">
          <div style="text-align:right; margin-bottom: 10px;">
             <el-button type="primary" style="margin-bottom: 20px;text-align: right;" @click="exportExcelDetail(cppName+'明细')">导出</el-button>
          </div>
        </div>
        <div id="detail4summary" v-loading.fullscreen.lock="fullscreenLoading5">
          <div class="customTableHeader">
            <div class="customTableTitle h_title headers"> <tr><td>{{ cppName }}</td></tr></div>
          </div>
          <div class="cpTable one" v-for="(item,index) in tableDataDetail" :key="index+'vvv'" style="margin-bottom:40px;" id="detail">
            <el-table ref="report-table" :data="item.tableData" border:row-class-name="tableRowClassName">
                <el-table-column label="项目" prop="title" min-width="300" align="center"></el-table-column>
                <el-table-column label="总票数" prop="zps" align="center" min-width="80"></el-table-column>
                <el-table-column label="票数统计" align="center" width="200">
                    <el-table-column v-for="(gz,j) in item.tableColumn" :key="j+'iiu'"  :label="gz.label" :prop="gz.prop" align="center" :fzIndex="j">
                      <el-table-column v-for="(d,j) in gz.children" :key="j+'yyu'" :label="d.label" :prop="d.prop" align="center" :fzIndex="j" min-width="110">
                      </el-table-column>
                    </el-table-column>
                </el-table-column>
            </el-table>
          </div>
          <div v-for="(i,j) in tableDataDetail2" style="margin-top: 20px;">
            <el-table ref="report-table" :data="i.tableData" border:row-class-name="tableRowClassName">
                <el-table-column v-for="(col,index) in i.tableColumn" :key="index+'yyy'" :prop="col.prop" :label="col.label" align="center" :min-width="index==0?'170':'60'" :align="index==0?'left':'center'">
                </el-table-column>
            </el-table>
          </div>
          <div class="questions one" v-for="(item,index) in detailQuestionList" :key="index+'zzz'" style="margin-top: 40px;margin-bottom:40px;" id="detail">
            <el-table ref="report-table" v-for="(i,k) in item.tableColumn" :data="i.tableData" :key="k+'ll'"		border:row-class-name="tableRowClassName">
              <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
              <el-table-column :label="i.label" :prop="i.prop" align="left">
                <el-table-column :label="i.children[0].label" :prop="i.children[0].prop">
                </el-table-column>
              </el-table-column>
            </el-table>
        </div>
          <div class="dc">
            <el-button @click="dialogVisible = false" style="text-align: right;">关闭</el-button>
          </div>
        </div>
      </span>
    </el-dialog>
  </el-dialog>
</template>

<script>
import {
  getData4P5one,
  getData4P5two,
  getData4P5three,
  getData4P5oneDetail,
  getData4P5twoDetail,
  getData4P5threeDetail
} from "@/api/ceping/cepinghzglb";
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  props: {
    summary5Data: {},
  },
  data() {
    return {
      activeName: "first",
      cppName: "",
      dialogVisible: false,
      tableColumn: [],
      colShowAll2: [],
      hdId: "",
      cppId: "",
      tableData: [],
      tableData2: [],
      tableData3: [],
      tableDataDetail: [],
      tableDataDetail2: [],
      detailQuestionList:[],
      fullscreenLoading5:false,
      params: {
        hdId: "",
        cppId: "",
      },
    };
  },
  watch: {
    summary5Data: {
      handler(newVal, oldVal) {
       //console.log(newVal);
        if (newVal.visible) {
          this.activeName = "first";
          this.params.hdId = newVal.hdId;
          this.params.cppId = newVal.cppId;
          this.getListone();
          this.getListtwo();
          this.getListthree();
          this.cppName = newVal.cppName;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    getListone() {
      this.fullscreenLoading5 = true;
      getData4P5one(this.params).then((response) => {
        this.tableData = response.data.data;
        this.fullscreenLoading5 = false;
      });
    },
    getListtwo() {
      this.fullscreenLoading5 = true;
      getData4P5two(this.params).then((response) => {
        this.tableData2 = response.data.data;
        this.fullscreenLoading5 = false;
      });
    },
    getListthree() {
       this.fullscreenLoading5 = true;
      getData4P5three(this.params).then((response) => {
        this.tableData3 = response.data.data;
        this.fullscreenLoading5 = false;
      });
    },
    handleClick(tab, event) {
     //console.log(tab);
     //console.log(event);
      if (tab.name == "first") {
        this.getListone();
      } else if (tab.name == "second") {
        this.getListtwo();
      } else if (tab.name == "third") {
        this.getListthree();
      }
    },
    detailBtn() {
      this.dialogVisible = true;
      this.fullscreenLoading5 = true
      getData4P5oneDetail(this.params).then((response) => {
        this.tableDataDetail = response.data.data;
      });
      getData4P5twoDetail(this.params).then((response) => {
        this.tableDataDetail2 = response.data.data;
      });
      getData4P5threeDetail(this.params).then((response)=>{
        this.detailQuestionList = response.data.data;
      })
      this.fullscreenLoading5 = false
    },
    exportExcel(excelName) {
      try {
        const ql = document.getElementById("three");
        const $e = ql;
        let $table = ql;

        if (!$table) {
          $table = $e;
        }
        const wb = XLSX.utils.table_to_book($table, { raw: true });
        const wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array",
        });
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          `${excelName}.xlsx`
        );
      } catch (e) {
        if (typeof console !== "undefined") console.error(e);
      }
    },
    exportExcelDetail(excelName) {
      try {
        const ql = document.getElementById("detail4summary");
        const $e = ql;
        let $table = ql;

        if (!$table) {
          $table = $e;
        }
        const wb = XLSX.utils.table_to_book($table, { raw: true });
        const wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array",
        });
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          `${excelName}.xlsx`
        );
      } catch (e) {
        if (typeof console !== "undefined") console.error(e);
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {},
    tableRowClassName({ row, rowIndex }) {
      let fz = this.fzbList.indexOf(this.tableData[rowIndex].zbName1);
      if (fz % 2 == 0) {
        return "cpRowNormal";
      } else {
        return "cpRowstripe";
      }
      return "";
    },
  },
};
</script>

<style scoped>
.h_dw_time {
  display: flex;
  justify-content: space-between;
}
/* .one .el-table{
    font-size: 15px !important;
} */
.fontDaTwo .el-table {
  font-size: 16px !important;
}
/* first-child */
.dc {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.h_title {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  line-height: 2;
}
.questions .el-table .cell {
  display: flex;
  justify-content:flex-start ;
}
</style>

